<template>
  <div id="pie" style="width: 100%; height: 53vh"></div>
</template>

<script>
/* eslint-disable */
import * as echarts from 'echarts';
// import request from '@/network/request'
export default {
  name: 'reasonRank',
  data () {
    return {
      timer: null,
      option: {
        title: {
          show: true,
          text: '告警排行统计',
          subtext: '仅显示排名最高前五项',
          textStyle: {
            color: '#fff'
          },
          subtextStyle: {
            color: '#f0f0f0'
          },
          left: 'left'
          // textAlign: 'center',
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          bottom: 'bottom',
          itemGap: 15,
          itemWidth: 20,
          textStyle: {
            color: '#fff',
            fontSize: 12,
            padding: [6, 0, 0, 0],
            lineHeight: 12
          }
        },
        series: [
          {
            name: '原因统计',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [],
            emphasis: {
              // itemStyle: {
              //   shadowBlur: 10,
              //   shadowOffsetX: 0,
              //   shadowColor: 'rgba(0, 0, 0, 0.5)'
              // }
            }
          }
        ]
      },
    }
  },
  methods: {
    createPieChart() {
      var chartDom = document.getElementById('pie')
      var pieChart = echarts.init(chartDom)
      this.option.series[0].data = []
      // request({
      //   url: '/dataOp/getRankAlarmCount',
      //   method: 'GET'
      // }).then((res) => {
      //   res.data.data.rankData.forEach(item => {
      //     this.option.series[0].data.push(
      //       {value: item.num, name: item.descriptor}
      //     )
      //   })
      //   this.option && pieChart.setOption(this.option)
      // })


    }
  },
  mounted() {
    // this.frequenceData = {
    //   columns: this.frequenceColumnsList,
    //   rows: this.frequenceListOrigin
    // }
    this.createPieChart()
    this.timer = setInterval(() => {
      this.createPieChart()
    }, 10000)

  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
/* eslint-disable */
</script>

<style scoped>

</style>

